<template>
	<view class="container">
		<view class="top-bg">
			<u-navbar 
			isBack 
			title="填写信息" 
			background="rgba(0,0,0,0)"
			back-icon-color="#fff"
			title-color="#fff"></u-navbar>
		</view>
		<view class="content">
			<image :src="`${baseimg}/static/common/order-color.png`" class="info-img" mode=""></image>
			<view class="info">		
				<view class="title">
					业主信息
				</view>
				<view class="name df-bt">
					<text>业主姓名</text>
					<input type="text" v-model="list.realname" class="title-input" placeholder="请输入业主真实姓名" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>				
				</view>
				<view class="phone df-bt">
					<text>手机号码</text>
					<input type="text" v-model="list.phone" class="title-input" placeholder="请选择业主手机号码" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>				
				</view>
				<view class="city df-bt">
					<text class="txt">省份</text>
					<view class="city-input df-bt" @click="select1(1)">
						<input type="text" v-model="list.province" disabled class="title-input" placeholder="请选择省份" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="city df-bt">
					<text class="txt">城市</text>
					<view class="city-input df-bt" @click="select2(2)">
						<input type="text" v-model="list.city" disabled class="title-input" placeholder="请选择城市" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="city df-bt">
					<text class="txt">县区</text>
					<view class="city-input df-bt" @click="select3(3)">
						<input type="text" v-model="list.district" disabled class="title-input" placeholder="请选择县区" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="city df-bt">
					<text class="txt">街道</text>
					<view class="city-input df-bt" @click="select4(4)">
						<input type="text" v-model="list.street" disabled class="title-input" placeholder="请选择街道" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="city df-bt">
					<text class="txt">小区</text>
					<view class="city-input df-bt">
						<input type="text" v-model="list.estate" class="title-input" placeholder="请输入小区" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="city df-bt">
					<text class="txt">详细地址</text>
					<view class="city-input df-bt">
						<input type="text" v-model="list.address" class="title-input" placeholder="请输入详细地址" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
			</view>
			<view class="house-info">
				<view class="title">
					房子信息
				</view>
				<view class="name df-bt">
					<text>户型</text>
					<input type="text" v-model="list.house_type" class="title-input" placeholder="比如：x室x厅" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>				
				</view>
				<view class="phone df-bt">
					<text>面积</text>
					<input type="text" v-model="list.house_area" class="title-input" placeholder="比如：xxxm" placeholder-style="font-size:24rpx;text-align:left;color:#D8D8D8"/>				
				</view>
			</view>
			
			<view class="appeal">
				<view class="title">
					施工诉求
				</view>
				<view class="textarea">
				     <textarea v-model="list.remark" disabled maxlength="1000" placeholder-style="color:#D8D8D8" placeholder="请填写施工诉求~"/>
				</view>
			</view>
			<view class="personInCharge">
				<view class="title">
					<view>
						施工负责人
					</view>
				</view>
				<view class="personInfo">
					<view class="item">
						<view class="Img" @click="toAddPerson">
							<view v-if="!personCharge1.avatar.path" class="gL_add">+</view>
							<image :src="personCharge1.avatar.path" mode=""></image>
						</view>
						{{personCharge1.name?personCharge1.name:'点击添加管家'}}
						<span>管家</span>
					</view>
					<view class="border"></view>
					<view class="item">
						<view class="Img" @click="toAddGc">
							<view v-if="!personCharge2.avatar.path" class="gL_add">+</view>
							<image :src="personCharge2.avatar.path" mode=""></image>
						</view>
						{{personCharge2.name?personCharge2.name:'点击添加工长'}}
						<span class="span2">工长</span>
					</view>
				</view>
			</view>
			<view class="design-time">
				<view class="title">
					施工时间
				</view>
				<view class="u-calendar df-ct">
					<view class="left" @click="handleTime">
						{{startDate}} 至 {{endDate}}
					</view>
					<!-- <view class="right" @click="handleTime">
						
					</view> -->
				    <u-calendar 
					v-model="show" 
					:mode="mode" 
					z-index="99999" 
					@change="change"
					max-date="2100-01-01">
						<view slot="tooltip">
							<view class="title">
								请选择设计开始/结束时间
							</view>
						</view>
					</u-calendar>
				</view>
			</view>
			<view class="contract">
				<view class="title">
					订单合同
				</view>
				<view class="upload">
					<view class="imgBox" v-for="(item,index) in contractImg" :key="index">
						<image :src="item.path" mode="" @click="toViewImg(index,1)"></image>
						<image :src="`${baseimg}/static/constr/remove.png`" @click="removeImg(index)" mode=""></image>
					</view>
					<view class="uploadBtn" @click="uploadFN(1)">+<span>图片/PDF</span></view>
				    <!-- <u-upload ref="" :on-change="handleChange" :auto-upload="false" upload-text="图片/PDF"></u-upload> -->
				</view>
			</view>	
			<view class="contract">
				<view class="title">
					施工图纸
				</view>
				<view class="upload">
					<view class="imgBox" v-for="(item,index) in constrImg" :key="index">
						<image :src="item.path" mode="" @click="toViewImg(index,2)"></image>
						<image :src="`${baseimg}/static/constr/remove.png`" @click="constrImgDel(index)" mode=""></image>
					</view>
					<view class="uploadBtn" @click="uploadFN(2)">+<span>添加图纸</span></view>
				    <!-- <u-upload ref="" :on-change="handleChange" :auto-upload="false" upload-text="图片/PDF"></u-upload> -->
				</view>
			</view>
			<view class="contract">
				<view class="title">
					设计图纸
				</view>
				<view class="upload">
					<view class="imgBox" v-for="(item,index) in desginImg" :key="index">
						<image :src="item.path" mode="" @click="toViewImg(index,4)"></image>
						<image :src="`${baseimg}/static/constr/remove.png`" @click="desginImgDel(index)" mode=""></image>
					</view>
					<view class="uploadBtn" @click="uploadFN(4)">+<span>添加图纸</span></view>
				    <!-- <u-upload ref="" :on-change="handleChange" :auto-upload="false" upload-text="图片/PDF"></u-upload> -->
				</view>
			</view>
			<view class="contract">
				<view class="title">
					选材单
				</view>
				<view class="upload">
					<view class="imgBox" v-for="(item,index) in materSingle" :key="index">
						<image :src="item.path" mode="" @click="toViewImg(index,3)"></image>
						<image :src="`${baseimg}/static/constr/remove.png`" @click="materSingleDel(index)" mode=""></image>
					</view>
					<view class="uploadBtn" @click="uploadFN(3)">+<span>添加</span></view>
				    <!-- <u-upload ref="" :on-change="handleChange" :auto-upload="false" upload-text="图片/PDF"></u-upload> -->
				</view>
			</view>	
			<!-- <view class="contract" v-if="role=='decoration'">
				<view class="title">
					设计图纸
				</view>
				<view class="upload">
					<view class="imgBox" v-for="(item,index) in constrImg" :key="index">
						<image :src="item.path" mode=""></image>
						<image :src="`${baseimg}/static/constr/remove.png`" @click="constrImgDel(index)" mode=""></image>
					</view>
					<view class="uploadBtn" @click="uploadFN(2)">+<span>添加图纸</span></view>
				</view>
			</view> -->
			<view class="contract-amount">
				<view class="title">
					合同金额
				</view>
				<input type="number" v-model="list.contract_price" placeholder="请输入订单总金额" class="input-pay" />
			</view>
			<view class="contract-amount">
				<view class="title">
					支付次数和比例
				</view>
				<view class="inputBox" v-for="(item,index) in payNumList" :key="index">
					<view class="num">{{index+1}}</view>
					<input type="number" v-model="item.propor" @input="proporInput(index)" placeholder="请输入比例" class="input-pay" />% 
					<text>￥{{(list.contract_price*(item.propor/100)).toFixed(2)}}</text>
					<image :src="`${baseimg}/static/adminShop/orderPlus1.png`" @click="plusPayNum" mode="" v-if="index==payNumList.length-1 && payNumList.length<8"></image>
					<image :src="`${baseimg}/static/adminShop/orderPlus2.png`" @click="reducePayNum(index)" mode="" v-if="index==payNumList.length-1 && payNumList.length>1"></image>
				</view>
				<!-- 备注 -->
				<view class="remarksBox">
					<view class="title">
						备注
					</view>
					<view class="textarea">
					     <textarea v-model="list.pay_rule_desc" maxlength="1000" placeholder-style="color:#D8D8D8" placeholder="请填写备注~"/>
					</view>
				</view>
			</view>
		</view>
		<view class="footer" v-if="!show">
			<button type="default" class="btn-text" @click="closeOrder">关闭订单</button>
			<button type="default" class="btn-text active" @click="sendSubmit">确定并发给客户</button>
		</view>
		<u-picker mode="selector" v-model="select_show" @confirm="selectConfirm" :range="selectList" range-key="city_name" :default-selector="[0]"></u-picker>
	</view>
</template>

<script>
	import service_constr from '@/service/constr.js'
	import URL from '@/config/url.js'
	export default {
		data() {
			return {
				id:null,
				role:'',
				baseimg:this.$static,
				list:{
					id:null,
					order_no:'',			//订单号
					director:[], 			//负责人
					progress:[],			//进度
					build_start_time:'',	//开始时间
					build_end_time:'',		//结束时间
					realname:'',			//姓名
					phone:'',				//手机号
					estate:'',				//小区
					house_type:'',			//户型
					house_area:'',			//面积
					address:'',				//地址
					city:'',				//城市
					district:'',			//县区
					street:'',				//街道
					remark:'',				//户主诉求
					contract_price:'',		//合同金额
					draw_thumb_url:'',		//施工图纸
					material_thumb_url:'',	//选材单
					contract_thumb_url:'',	//合同
					design_thumb_url:'',	//设计图纸
					pay_rule:'',			//支付比例
				},
				show: false,
				mode: 'range',
				startDate:'2020-02-03',
				endDate:'2021-03-06',
				// footerShow:true,
				personCharge1:{}, //管家
				personCharge2:{}, //工长
				contractImg:[], //合同图纸
				constrImg:[] ,//施工图纸
				materSingle:[],//选材单
				desginImg:[], //设计图纸
				selectList:[], //地区列表
				province_id:null,
				city_id:null,
				district_id:null,
				street_id:null,
				select_show:false,
				payNumList:[{propor:60},{propor:30},{propor:10}]
			}
		},
		onLoad(options) {	
			let newDate = new Date
			let year = newDate.getFullYear()
			let month = newDate.getMonth()+1
			let day = newDate.getDate()
			month = month<10?'0'+month.toString():month
			day = day<10?'0'+day.toString():day
			this.startDate = year+'-'+month+'-'+day;
			this.endDate = this.$utils.getNowFormatDateTime(this.startDate)
			
			this.role = this.$store.state.index.role
			this.id = options.id;
			this.getOrderDetail()
		},
		onShow() {
			// this.getOrderDetail()
		},
		methods:{
			// 增加支付次数
			plusPayNum(){
				this.payNumList.push({propor:0})
			},
			// 减少支付次数
			reducePayNum(index){
				this.payNumList.splice(index,1)
			},
			
			// 获取详情
			getOrderDetail(){
				service_constr.getDetail({id:this.id}).then(res=>{
					console.log(res,'订单详情')
					if(res.code==1){
						this.list = res.data?res.data:[];
						// 合同
						let isArr = Array.isArray(res.data.contract_thumb_url)
						if(isArr){
							this.contractImg = res.data.contract_thumb_url;
						}else{
							this.contractImg.push(res.data.contract_thumb_url)
						}
						
						// 施工图纸
						let isArr2 = Array.isArray(res.data.draw_thumb_url)
						if(isArr2){
							this.constrImg = res.data.draw_thumb_url;
						}else{
							this.constrImg.push(res.data.draw_thumb_url)
						}
						
						// 选材单
						let isArr3 = Array.isArray(res.data.material_thumb_url)
						if(isArr3){
							this.materSingle = res.data.material_thumb_url;
						}else{
							this.materSingle.push(res.data.material_thumb_url)
						}
						
						// 设计图纸
						let isArr4 = Array.isArray(res.data.design_thumb_url)
						if(isArr4){
							this.desginImg = res.data.design_thumb_url;
						}else{
							this.desginImg.push(res.data.design_thumb_url)
						}
						
						if(res.data.start_time){
							this.startDate = this.$utils.getFormatDate(res.data.start_time*1000,'yyyy-MM-dd')
						}
						if(res.data.end_time){
							this.endDate = this.$utils.getFormatDate(res.data.end_time*1000,'yyyy-MM-dd')
						}
						res.data.director.map(item=>{
							if(item.position==1){
								this.personCharge1 = item
							}else{
								this.personCharge2 = item
							}
						})
						// this.personCharge1 = res.data.director[0]?res.data.director[0]:{};
						// this.personCharge2 = res.data.director[1]?res.data.director[1]:{};
					
						this.province_id = res.data.province_id;
						this.city_id = res.data.city_id;
						this.district_id = res.data.district_id;
						this.street_id = res.data.street_id;
					}
				})
			},
			
			// 获取省份列表
			getProvice(){
				this.$api.getProviceList().then(res=>{
					console.log(res,'省份列表')
					if(res.code==1){
						this.selectList = res.data?res.data:[]
					}
				})
			},
			// 获取城市
			getCity(){
				this.$api.getCityList({province_id:this.province_id}).then(res=>{
					console.log(res,'城市列表')
					if(res.code==1){
						this.selectList = res.data?res.data:[]
					}
				})
			},
			// 获取县区
			getDistrict(){
				this.$api.getDistrictList({city_id:this.city_id}).then(res=>{
					console.log(res,'县区列表')
					if(res.code==1){
						this.selectList = res.data?res.data:[]
					}
				})
			},
			// 获取街道
			getStreet(){
				this.$api.getStreetList({district_id:this.district_id}).then(res=>{
					console.log(res,'街道列表')
					if(res.code==1){
						this.selectList = res.data?res.data:[]
					}
				})
			},
			
			// 选择1
			select1(e){
				this.getProvice()
				this.selectType = e
				this.select_show = true
				// this.city1 = e.detail.value;
			},
			// 选择2
			select2(e){
				if(!this.province_id || !this.list.province){
					uni.showToast({
						title:'请先选择省份',
						icon:'none'
					})
					return
				}
				this.getCity()
				this.selectType = e
				this.select_show = true
				// this.city1 = e.detail.value;
			},
			// 选择3
			select3(e){
				if(!this.city_id || !this.list.city){
					uni.showToast({
						title:'请先选择城市',
						icon:'none'
					})
					return
				}
				this.getDistrict()
				this.selectType = e
				this.select_show = true
				// this.city1 = e.detail.value;
			},
			// 选择4
			select4(e){
				if(!this.district_id || !this.list.district){
					uni.showToast({
						title:'请先选择县区',
						icon:'none'
					})
					return
				}
				this.getStreet()
				this.selectType = e
				this.select_show = true
				// this.city1 = e.detail.value;
			},
			// 选择后确定
			selectConfirm(e){
				let index = e[0]
				if(this.selectType==1){
					this.list.province = this.selectList[index].city_name
					this.province_id = this.selectList[index].cityid
					this.list.city = ''
					this.list.district = ''
					this.list.street = ''
					this.city_id = null
					this.district_id = null
					this.street_id = null
				}else if(this.selectType==2){
					this.list.city = this.selectList[index].city_name
					this.city_id = this.selectList[index].cityid
					this.list.district = ''
					this.list.street = ''
					this.district_id = null
					this.street_id = null
				}else if(this.selectType==3){
					this.list.district = this.selectList[index].city_name
					this.district_id = this.selectList[index].cityid
					this.list.street = ''
					this.street_id = null
				}else{
					this.list.street = this.selectList[index].city_name?this.selectList[index].city_name:''
					this.street_id = this.selectList[index].cityid?this.selectList[index].cityid:0
				}
			},
			
			// 添加管家
			toAddPerson(){
				let id = this.personCharge1.id?this.personCharge1.id:'';
				let order_id = this.id;
				let old_builder = this.personCharge1.builder_id?this.personCharge1.builder_id:'';
				let other_id = this.personCharge2.builder_id?this.personCharge2.builder_id:'';
				uni.navigateTo({
					url:`/pages_decoration/home/buildOrder/staffList?position=1&id=${id}&order_id=${order_id}&old_builder=${old_builder}&other_id=${other_id}`
				})
			},
			
			// 添加工长
			toAddGc(){
				let id = this.personCharge2.id?this.personCharge2.id:'';
				let order_id = this.id;
				let old_builder = this.personCharge2.builder_id?this.personCharge2.builder_id:'';
				let other_id = this.personCharge1.builder_id?this.personCharge1.builder_id:'';
				uni.navigateTo({
					url:`/pages_decoration/home/buildOrder/staffList?position=2&id=${id}&order_id=${order_id}&old_builder=${old_builder}&other_id=${other_id}`
				})
			},
			
			// 上传图片
			uploadFN(num){
				uni.chooseImage({
					count:1,
				    success: (res) => {
				        const tempFilePaths = res.tempFilePaths;
				        uni.uploadFile({
				            url: URL.ENTER_UPLOAD_IMAGE,
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								uni.showLoading({
									title:'上传中'
								})
				                console.log(uploadFileRes.data);
								let data = JSON.parse(uploadFileRes.data)
								if(data.code==1){
									let obj = {
										path:data.data.url,
										id:data.data.id
									}
									if(num==1){ //1合同，2施工图纸，3选材，4设计图纸
										this.contractImg.push(obj)
									}else if(num==2){
										this.constrImg.push(obj)
									}else if(num==4){
										this.desginImg.push(obj)
									}else{
										this.materSingle.push(obj)
									}
									uni.showToast({
										title:'上传成功',
										icon:'success'
									})
								}else{
									uni.showToast({
										title:data.msg,
										icon:'none'
									})
								}
								setTimeout(function(){
									uni.hideLoading()
								},500)
				            }
				        });
				    }
				});
			},
			
			// 图片预览
			toViewImg(index,type) { //type=1合同，type=2施工图纸，type=4设计图纸
				let imgArr = type==1?this.contractImg:type==2?this.constrImg:type==4?this.desginImg:this.materSingle;
				let urlType = Array.isArray(imgArr)
				console.log(imgArr,'需要预览的图片')
				let imgUrl = []
				if (urlType) {
					imgArr.map(item => {
						imgUrl.push(item.path)
					})
				} else {
					imgUrl.push(imgArr.path)
				}
				uni.previewImage({
					current: index, //预览图片的下标
					urls: imgUrl //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				});
			},
			
			// 关闭订单
			closeOrder(){
				uni.showModal({
					title:'提示',
					content:'确定要关闭此订单吗？',
					 success:res=>{
					        if (res.confirm) {
					            console.log('用户点击确定');
								service_constr.cancelOrder({id:this.id}).then(res=>{
									if(res.code==1){
										uni.showToast({
											title:'已关闭',
											icon:'success'
										})
										uni.navigateBack()
									}
								})
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
				})
			},
			
			// 移除图片
			removeImg(index){
				this.contractImg.splice(index,1)
				console.log(this.contractImg)
			},
			
			// 移除施工图纸
			constrImgDel(index){
				this.constrImg.splice(index,1)
			},
			// 移除选材单
			materSingleDel(index){
				this.materSingle.splice(index,1)
			},
			// 移除设计图纸
			desginImgDel(index){
				this.desginImg.splice(index,1)
			},
			
			
			change(e) {
				console.log(e,9999);
				this.startDate = e.startDate
				this.endDate = e.endDate
				// this.footerShow = true
				this.show = false
			},
			handleTime(){
				this.show = true
				// this.footerShow = !this.footerShow
			},
			
			// 比例
			proporInput(index){
				console.log(index,this.payNumList,'支付比例')
				let allPropor = 0
				this.payNumList.map(item=>{
					allPropor += (item.propor*1)
				})
				console.log(allPropor,'比例之和')
				if(allPropor>100){
					uni.showToast({
						title:'比例之和为100',
						icon:'none'
					})
					this.payNumList[index].propor = 0
				}
			},
			
			// 确定按钮
			sendSubmit(){
				// 处理支付次数及比例
				let payArr = []
				let allPrice = 0
				this.payNumList.map(item=>{
					allPrice += (item.propor*1)
					payArr.push(item.propor/100)
				})
				for(let i = 0;i<payArr.length;i++){
					if(payArr[i]<=0){
						uni.showToast({
							title:'请均匀分配100%比例',
							icon:'none'
						})
						return
					}
				}
				console.log(allPrice,'总比例')
				console.log(payArr,'比例数组')
				if(allPrice!=100){
					uni.showToast({
						title:'支付次数比例之和必须等于100',
						icon:'none'
					})
					return
				}
				
				if(this.list.contract_price<1){
					uni.showToast({
						title:'合同金额最低为1元',
						icon:'none'
					})
					return
				}
				this.list.id = this.id;
				this.list.province_id = this.province_id;
				this.list.city_id = this.city_id;
				this.list.district_id = this.district_id;
				this.list.street_id = this.street_id;
				this.list.is_back = 0; //回退
				this.list.build_start_time = this.startDate;
				this.list.build_end_time = this.endDate;
				this.list.pay_rule = payArr.join(',');
				// 合同图纸
				let arr = [];
				this.contractImg.map(item=>{
					arr.push(item.id)
				})
				this.list.contract_thumb_url = arr.join(',')
				// 施工图纸
				let arr1 = [];
				this.constrImg.map(item=>{
					arr1.push(item.id)
				})
				this.list.draw_thumb_url = arr1.join(',')
				// 选材单
				let arr2 = []
				this.materSingle.map(item=>{
					arr2.push(item.id)
				})
				this.list.material_thumb_url = arr2.join(',')
				// 设计图纸
				let arr3 = []
				this.desginImg.map(item=>{
					arr3.push(item.id)
				})
				this.list.design_thumb_url = arr3.join(',')
				
				if(!this.personCharge1.builder_id || !this.personCharge2.builder_id){
					uni.showToast({
						title:'请选择负责人',
						icon:'none'
					})
					return
				}
				let arry = [{
					builder_id:this.personCharge1.builder_id?this.personCharge1.builder_id:'',
					position:1
				},{
					builder_id:this.personCharge2.builder_id?this.personCharge2.builder_id:'',
					position:2
				}]
				this.list.director = JSON.stringify(arry)
				console.log(this.list)
				service_constr.toHandleOrder(this.list).then(res=>{
					console.log(res)
					if(res.code==1){
						uni.showToast({
							title:'处理成功',
							icon:'success'
						})
						uni.navigateBack({
							delta:1
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	
	.container{
		
		.top-bg{
			background:  url(https://manager.ryz1620.com/static/home-personal/personal-bg.png) no-repeat top;
			width: 100%;
			height: 468rpx;
			position: relative;
			/deep/ .u-navbar .u-border-bottom{
						border: 0 !important;
					}
		}
		.content{
			position: absolute;
			left: 0;
			top: 190rpx;
			z-index: 99;
			padding: 24rpx 24rpx 200rpx 24rpx;
			width: 100%;
			.info-img{
				width: 702rpx;
				height: 38rpx;
			}
			.info{
				padding: 24rpx;
				background-color: #fff;
				// border-radius: 16rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				.name{
					width: 70%;
					margin: 40rpx 0;
				}
				.phone{
					width: 70%;
					margin-bottom: 80rpx;
				}
				.city{					
					margin-bottom: 40rpx;
					.txt{
						width: 30%;
					}
					.city-input{
						width: 90%;
						.title-input{
							// text-align: right;
							margin-right: 20rpx;
						}
					}
					.icon-jinru{
						color: #D8D8D8;
						font-size: 26rpx;
					}
					
				}
			}
			.house-info{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				.name{
					width: 70%;
					margin: 40rpx 0;
				}
				.phone{
					width: 70%;
					margin-bottom: 80rpx;
				}
			}
			.appeal{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				.textarea{
					background: #F8F8F8;
					padding: 24rpx;
					height: 160rpx;
					overflow-y: auto;
					margin-top: 40rpx;
				}
			}
			
			// 施工负责人
			.personInCharge{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font: 500 30rpx/40rpx PingFang SC;
					color: #0A0605;
					span{
						font: 400 22rpx/18rpx PingFang SC;
						color: #505050;
					}
				}
				.personInfo{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 48rpx 80rpx 0;
					font: 400 26rpx/40rpx PingFang SC;
					color: #0A0605;
					.item{
						display: flex;
						flex-direction: column;
						align-items: center;
						image{width: 114rpx;height: 114rpx;border-radius: 50%;margin-bottom: 16rpx;}
						span{
							margin-top: 4rpx;
							width: 60rpx;
							height: 30rpx;
							padding: 0rpx 12rpx;
							font: 400 18rpx/30rpx PingFang SC;
							color: #fff;
							border-radius: 18rpx;
							background-color: #636B90;
						}
						.Img{
							text-align: center;
							line-height: 114rpx;
							width: 114rpx;height: 114rpx;border-radius: 50%; background-color: #F8F8F8;
							.gL_add{width: 100%;height: 100%;color: #A0A0A0;font-size: 40rpx;}
						}
						.span2{color: #505050;background-color: #FFCE0D;}
					}
					.border{
						width: 0;
						height: 120rpx;
						border: 1rpx solid #D8D8D8;
					}
				}
			}
			
			
			.contract{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				.upload{
					margin-top: 40rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.imgBox{
						margin: 0 5rpx 10rpx;
						position: relative;
						width: 200rpx;
						height: 200rpx;
						border-radius: 4rpx;
						image:nth-child(1){
							width: 100%;
							height: 100%;
							border-radius: 4rpx;
						}
						image:nth-child(2){
							width: 50rpx;
							height: 50rpx;
							position: absolute;
							top: 5rpx;
							right: 5rpx;
						}
					}
					.uploadBtn{
						margin: 0 5rpx 10rpx;
						background-color: #F8F8F8;
						border-radius: 4rpx;
						width: 200rpx;
						height: 200rpx;
						font-size: 60rpx;
						display:  flex;
						align-items: center;
						color: #A0A0A0;
						flex-direction: column;
						justify-content: center;
						span{font: 400 22rpx/36rpx PingFang SC;}
					}
				}
			}
			.design-time{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #0A0605;
				}
				.u-calendar{
					margin-top: 40rpx;
					// z-index: 99999;
					.title{
						text-align: center;
						padding: 20rpx 0 0 0;
					}
					.left{
						background: #F8F8F8;
						padding: 24rpx 36rpx;
					}
					.right{
						background: #F8F8F8;
						padding: 24rpx 36rpx;
					}
				}
			}
			.contract-amount{
					padding: 24rpx;
					background-color: #fff;
					border-radius: 16rpx;
					margin-top: 30rpx;
					.title{
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						color: #0A0605;
					}
			
					.input-pay{
							width: 100%;
							height: 84rpx;
							margin-top: 40rpx;
							padding-left: 20rpx;
							background-color: #F8F8F8;
							color: #DBA954;
					}
					.inputBox{
						display: flex;
						align-items: center;
						margin: 30rpx 0 0;
						.num{
							width: 35rpx;
							height: 35rpx;
							border: 2rpx solid #A0A0A0;
							border-radius: 50%;
							text-align: center;
							font-size: 22rpx;
							line-height: 30rpx;
							margin-right: 20rpx;
						}
						input{
							width: 150rpx;
							margin: 0;
							color: #333;
							padding-left:20rpx;
						}
						image{
							width: 50rpx;
							height: 50rpx;
							margin-left: 30rpx;
						}
						text{
							color: #DBA954;
							margin-left: 20rpx;
						}
					}
					
					// 备注
					.remarksBox{
						// padding: 24rpx;
						background-color: #fff;
						border-radius: 16rpx;
						margin-top: 30rpx;
						.title{
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 500;
							line-height: 40rpx;
							color: #0A0605;
						}
						.textarea{
							background: #F8F8F8;
							padding: 24rpx;
							height: 160rpx;
							overflow-y: auto;
							margin-top: 20rpx;
						}
					}
					
			}
		}
		.footer{
			height: 150rpx;
			width: 100%;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 99;
			padding: 30rpx;
			display: flex;
			justify-content:flex-end ;
			align-items: center;
			.btn-text {
				width: 172rpx;
				height: 64rpx;
				background: #FFFFFF;
				border: 2rpx solid #505050;
				opacity: 1;
				border-radius: 32rpx;
				text-align: center;
				line-height: 64rpx;
				color: #505050;
				font-size: 26rpx;
				margin: 0 10rpx;
			}
			.active{
				background-color: #DBA954;
				color: #fff;
				border: 0;
				width: 240rpx;
			}
		}
	}
</style>
